/* function style */
@import './variables.less';

/**
 * 制作三角形
 * @b   表示三角形的方向
 * @s   表示三角形的尺寸
 * @c   表示三角形的颜色
 */
.arrow (@b: top, @s: 6px, @c: @blackColor) {
    border: @s solid transparent;

    border-@{b}: @s solid @c;

    width: 0/@rem;
    font-size: 0/@rem;
}

.boxShadow() {
    box-shadow: 0 2/@remScale 6/@remScale 0 rgba(0, 0, 0, 0.1);
}

.cardBoxShadow() {
    box-shadow: 0 1px 2px rgba(25, 25, 25, 0.2);
}

.navBarShadow() {
    box-shadow: 0 2/@remScale 10/@remScale 0 rgba(0, 0, 0, 0.1);
}

.btnLightenHover(@bgColor:color) {
    &:hover {
        background: lighten(@bgColor, 10%);
        @media (max-width: @max1) {
            background: @bgColor;
        }
    }
    &:active {
        background: radial-gradient(fade(@bgColor, 80%), fade(@bgColor, 100%));
        @media (max-width: @max1) {
            background: lighten(@bgColor, 10%);
        }
    }
}

.btnDarkenHover(@bgColor:color) {
    &:hover {
        background: darken(@bgColor, 10%);
        @media (max-width: @max1) {
            background: @bgColor;
        }
    }
    &:active {
        background: radial-gradient(fade(@bgColor, 80%), fade(@bgColor, 100%));
        @media (max-width: @max1) {
            background: darken(@bgColor, 10%);
        }
    }
}

.hoverColor(@oldColor:color,@newColor:color) {
    &:hover {
        color: @newColor;
        @media (max-width: @max1) {
            color: @oldColor;
        }
    }
}

.secondary() {
    margin: 50/@remScale 100/@rem;
    @media (max-width: @max4) {
        margin: 40/@rem  70/@rem;
    }
    @media (max-width: @max3) {
        margin: 30/@rem  50/@rem;
    }
    @media (max-width: @max2) {
        margin: 20/@remScale 30/@rem;
    }
    @media (max-width: @max1) {
        margin: 10/@rem;
    }
}

.secondaryPadding() {
    padding: 0 12%;
    @media (max-width: @max4) {
        padding: 0 10%;
    }
    @media (max-width: @max3) {
        padding: 0 7%;
    }
    @media (max-width: @max2) {
        padding: 0 5%;
    }
}

.secondaryMargin() {
    margin: 40/@remScale 0;
    @media (max-width: @max3) {
        margin: 30/@rem 0;
    }
    @media (max-width: @max2) {
        margin: 20/@remScale 0;
    }
    @media (max-width: @max1) {
        margin: 15/@remScale 0;
    }
}

.secondaryLeft() {
    height: 1/@remScale;
    width: @pc-nav-left-width;
    //margin-right: 20/@remScale;
    float: left;
    @media (max-width: @max1) {
        display: none;
    }
}

.headerWrapperClass() {
    height: 60/@remScale;
    line-height: 60/@remScale;
    padding: 0 20/@remScale;
    color: @black-three;
    font-size: 20/@remScale;
}

.dialogHeaderClass() {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60/@remScale;
    flex: 0 0 60/@remScale;
    padding: 0 20/@remScale;
    color: #202020;
    font-size: 16/@remScale;
    border-bottom: 1/@remScale solid #eeeeee;
    .header-close {
        color: #cccccc;
        cursor: pointer;
        &:hover {
            color: #777777;
        }
    }
}

.scrollBarClass() {
    &::-webkit-scrollbar {
        width: 5/@remScale;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #A6A6A6;
        border-left: 2/@remScale solid transparent;
    }
    &::-webkit-scrollbar-track {
        background-color: #E5E5E5;
        border-left: 2/@remScale solid transparent;
    }
}

.secondaryPadding15() {
    padding: 0 calc(~"12% - 15px") 0 12%;
    @media (max-width: @max4) {
        padding: 0 calc(~"10% - 15px") 0 10%;
    }
    @media (max-width: @max3) {
        padding: 0 calc(~"7% - 15px") 0 7%;
    }
    @media (max-width: @max2) {
        padding: 0 calc(~"5% - 15px") 0 5%;
    }
    @media (max-width: @max1) {
        padding: 0 2%;
    }
}

.text-overflow-1() {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.backBtnStyle() {
    display: flex;
    color: #666666;
    width: 30/@remScale;
    height: 30/@remScale;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    .orin-sw-reicon-root {
        height: 20/@remScale;
        transition: all .5s;
        width: 20/@remScale;
    }
}

.text-overflow(@line) {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: @line;
    //需要加一下两个注释才会有效果
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    display: -webkit-box;
    word-break: break-all;
}

.fadeIn() {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
}

.fadeOut() {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.6s cubic-bezier(0, 0, 0.2, 1);
}

.translateEnter() {
    transition: all .5s;
    transform: translate(0, 0);
}

.translateLeave() {
    transition: all .5s;
    transform: translate(120%, 0);
}

.translateTopEnter() {
    transition: all .5s;
    transform: translate(0, 0);
}

.translateTopLeave() {
    transition: all .5s;
    transform: translate(0, 130%);
}

.toHeaderTitleWrapper {
    height: 80/@remScale;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.backHeader() {
    position: relative;
    width: 100%;
    height: @home-header-height-phone;
    background: @white;
    padding: 0 50/@remScale;
    border-bottom: 1/@remScale solid #eeeeee;
}

.backHeaderTitle() {
    width: 100%;
    height: @home-header-height-phone;
    line-height: @home-header-height-phone;
    font-size: 18/@remScale;
    text-align: center;
    .text-overflow(1);
}

.topHeaderTitleSizeColor {
    font-size: 20/@remScale;
    color: @black-three;
}

.barItemClass() {
    font-size: 14/@remScale;
    color: #ccc;
    padding: 0 11/@remScale;
    height: 40/@remScale;
    line-height: 40/@remScale;
    margin-right: 20/@remScale;
    cursor: pointer;
    &:hover {
        color: @white;
        background: @light-blue-color;
    }
    &:last-child {
        margin-right: 0;
    }
    &.active {
        color: @white;
        background: @light-blue-color;
    }
}

.blueBorder() {
    border: 1/@remScale solid @light-blue-color;
    border-radius: 4/@remScale;
    font-size: 14/@remScale;
    cursor: pointer;
    color: @light-blue-color;
    text-align: center;
    @media (min-width: @max1) {
        &:hover {
            background: rgba(29, 176, 231, 0.1);
        }
    }
}

.grayBorder() {
    border: 1/@remScale solid @cancel-btn-color;
    border-radius: 4/@remScale;
    font-size: 14/@remScale;
    cursor: pointer;
    color: #60666C;
    text-align: center;
    @media (min-width: @max1) {
        &:hover {
            background: rgba(175, 181, 188, 0.1);
        }
    }
}

.dialog-header() {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20/@rem;
    height: 70/@remScale;
}

.dialog-header-p() {
    color: #303133;
    font-size: 16/@remScale;
    @media (max-width: @max1) {
        font-size: 18/@remScale;
    }
}

.dialog-header-span() {
    color: @pinkish-grey;
    cursor: pointer;
    &:hover {
        color: @black-auxiliary-text;
        @media (max-width: @max1) {
            color: @pinkish-grey;
        }
    }
}

.banner(@image:string,@imageText:string,@left) {
    width: 100%;
    height: 300/@remScale;
    background-image: url(@image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    .banner-text {
        position: absolute;
        top: 50%;
        left: @left;
        transform: translate(0, -50%);
        width: 360/@remScale;
        height: 150/@remScale;
        object-fit: cover;
        background-image: url(@imageText);
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    @media screen and (max-width: @max1) {
        height: 150/@remScale;
        background-size: auto 100%;
        background-position: center;
        .banner-text {
            width: 70%;
            height: 100%;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-size: 100%;
            background-position: center;
        }
    }
}

.iconAnimation() {
    .icon {
        &.to-large {
            animation: iconToLarge .7s;
        }
        &.to-small {
            animation: iconToSmall .7s;
        }
    }
    .blue-icon, .yellow-icon {
        color: @light-blue-color;
        opacity: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-56%, -64%) scale(0);
        &.to-large {
            animation: blueIconToLarge 1s;
        }
        &.to-small {
            animation: blueIconToSmall 1s;
        }
    }
    .yellow-icon {
        color: #ffc600;
    }
}

@-webkit-keyframes iconToLarge {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@-webkit-keyframes blueIconToLarge {
    30% {
        transform: translate(-56%, -64%) scale(0);
    }
    99% {
        transform: translate(-56%, -64%) scale(2);
    }
    100% {
        transform: translate(-56%, -64%) scale(0);
    }
}



